<template>
    <div>
        <h3>测试Axios组件</h3>
        <p>图书的数量是：{{books.length}}</p>
        <table class="table">
            <tbody>
                <tr v-for="book in books">
                    <td>{{book.id}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.cover}}</td>
                    <td>{{book.createTime}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.price}}</td>
                </tr>
            </tbody>
        </table>
        <button @click="getById(1)">测试getbookid</button>
        {{book}}
        <form v-model="book">
            <input type="text" v-model="book.name" placeholder="输入书名：">
            <br>
            <input type="text" v-model="book.author" placeholder="输入作者：">
            <br>
            <input type="text" v-model="book.price" placeholder="输入价钱：">
            <br>
            <button @click="saveBook">测试保存</button>
        </form>
    </div>
</template>

<script>
    import axios from '../axios.js'
    export default {
        name: "life",
        data(){
            return{
                books:[],
                book:{}
            }
        },
        methods:{
            async getBooks(){
                const {
                    data:data
                } = await axios.get('http://127.0.0.1:9090/book')
                console.log(data)
                this.books = data.data.records
            },
            async getById(BookId){
                const {
                    data:bid
                } = await axios.get('http://127.0.0.1:9090/book/'+BookId)
                console.log(bid)
                this.book = bid.data
            },
            async saveBook(){
                const {
                    data:save
                } = await axios.post('http://127.0.0.1:9090/book/',this.book)
            }
        },
        created() {
            this.getBooks()
        }
    }
</script>

<style scoped>
    @import "../assets/bootstrap.css";
</style>